<script setup>
import { reactive } from "vue";
import ChatWindow from "@/components/chatWindow.vue";
import { useGlobalWs } from "@/stores/globalWs.js";

const globalWs = useGlobalWs();

const data = reactive({
  chatList: [],
});

const onAddUser = () => {
  const user = {
    id: "user" + new Date().getTime(), name: "user" + Math.floor(Math.random() * 100),
  };
  data.chatList.push(user);
  globalWs.addUser(user);
};

const onCloseChat = (user) => {
  data.chatList = data.chatList.filter(item => item.id !== user.id);
  globalWs.removeUser(user);
};

const onSendMsg = (msgObj) => {
  msgObj.date = new Date().toLocaleDateString();
  msgObj.time = new Date().toLocaleTimeString();
  globalWs.sendMsg(msgObj);
};
</script>

<template>
  <div class="simple-chat">
    <div class="add-btn" @click="onAddUser">+</div>
    <div class="chat" v-for="item in data.chatList">
      <chat-window :user="item" @close="onCloseChat" @send="onSendMsg"></chat-window>
    </div>
  </div>
</template>

<style scoped>
.simple-chat {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 33.33% 33.33% 33.33%;
  gap: 10px;
  user-select: none;

  .add-btn {
    width: 80px;
    height: 80px;
    position: absolute;
    right: 10px;
    bottom: 20px;
    font-size: 50px;
    font-weight: bold;
    background-color: #1890ff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    z-index: 1;
  }
}
</style>
